<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 订单摘要
const orderSummary = ref({
  items: [
    { name: '香辣鸡腿堡', price: 22, count: 2 },
    { name: '薯条（大）', price: 15, count: 1 }
  ],
  subtotal: 59,
  deliveryFee: 5,
  discount: 10,
  total: 54
})

// 配送信息
const deliveryInfo = ref({
  name: '刘先生',
  phone: '136****4236',
  address: '昆明市第十中学（求实校区）'
})

// 预计送达时间
const deliveryTime = ref({
  title: '尽快送达',
  time: '预计21:00送达'
})

// 选择配送时间
const showTimeOptions = ref(false)

// 去支付
const gotoPayment = () => {
  router.push({ name: 'payment' })
}
</script>

<template>
  <!-- 顶部导航栏 -->
  <div class="bg-primary text-white py-4 text-center font-bold text-lg sticky top-0 z-10">
    确认订单
  </div>

  <div class="pb-24 max-w-screen-md mx-auto px-4 pt-4">
    <!-- 配送信息 -->
    <div class="bg-white p-4 mb-2 rounded-lg">
      <div class="flex items-center text-gray-500">
        <div class="i-material-symbols:location-on text-primary mr-1"></div>
        <span>配送至</span>
      </div>
      <div class="mt-2 flex">
        <div class="flex-1">
          <div class="flex">
            <span class="font-bold mr-3">{{ deliveryInfo.name }}</span>
            <span>{{ deliveryInfo.phone }}</span>
          </div>
          <div class="mt-1 text-sm">{{ deliveryInfo.address }}</div>
        </div>
        <div class="i-material-symbols:arrow-forward-ios text-gray-500"></div>
      </div>
    </div>
    
    <!-- 配送时间 -->
    <div 
      class="bg-white p-4 flex justify-between items-center mb-2 rounded-lg"
      @click="showTimeOptions = true"
    >
      <div>
        <div class="text-gray-500">配送时间</div>
        <div class="mt-1 font-bold">{{ deliveryTime.title }}</div>
        <div class="mt-1 text-sm text-gray-500">{{ deliveryTime.time }}</div>
      </div>
      <div class="i-material-symbols:arrow-forward-ios text-gray-500"></div>
    </div>
    
    <!-- 订单信息 -->
    <div class="bg-white p-4 mb-2 rounded-lg">
      <div class="text-gray-500">订单信息</div>
      <div class="mt-2">
        <div 
          v-for="(item, index) in orderSummary.items" 
          :key="index" 
          class="flex justify-between py-2 text-sm border-b border-gray-100"
        >
          <div>{{ item.name }} × {{ item.count }}</div>
          <div>¥{{ item.price * item.count }}</div>
        </div>
        
        <div class="flex justify-between py-2 text-sm">
          <div>小计</div>
          <div>¥{{ orderSummary.subtotal }}</div>
        </div>
        <div class="flex justify-between py-2 text-sm">
          <div>配送费</div>
          <div>¥{{ orderSummary.deliveryFee }}</div>
        </div>
        <div class="flex justify-between py-2 text-sm text-primary">
          <div>店铺优惠</div>
          <div>-¥{{ orderSummary.discount }}</div>
        </div>
      </div>
      
      <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between items-center">
        <span>合计</span>
        <div class="text-xl font-bold text-red-500">¥{{ orderSummary.total }}</div>
      </div>
    </div>
    
    <!-- 支付按钮 -->
    <div class="bg-white border-t border-gray-100 py-3 px-4 mb-6 rounded-lg flex-center">
      <button 
        @click="gotoPayment"
        class="w-full bg-primary text-white py-3 rounded-full font-bold hover:bg-opacity-90 transition-colors"
      >
        去支付 ¥{{ orderSummary.total }}
      </button>
    </div>
  </div>
</template>